<template>
	<section>
		<el-form :inline="true" :model="formInline" class="demo-form-inline">
			<el-form-item label="姓名:">
				<el-input v-model="formInline.carno" placeholder="请输入"></el-input>
			</el-form-item>
			<el-form-item label="状态:">
				<el-select v-model="formInline.gys" placeholder="请选择">
					<el-option label="张三" value="shanghai"></el-option>
					<el-option label="李四" value="beijing"></el-option>
				</el-select>
			</el-form-item>			
			<el-form-item>
				<el-button type="primary" @click="onSubmit">查询</el-button>
				<el-button type="default">重置</el-button>
				<el-button type="text">展开</el-button>
			</el-form-item>
		</el-form>
		<el-row>
			<el-col :span="24">
				<el-table :data="tableData" style="width: 100%">
					<el-table-column type="index" :index="indexMethod">
					</el-table-column>
					<el-table-column prop="name" label="姓名">
					</el-table-column>
					<el-table-column prop="IDcard" label="身份证号">
					</el-table-column>
					<el-table-column prop="relates" label="联系方式">
					</el-table-column>				
					<el-table-column prop="status" label="状态">
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button size="mini" type="primary" @click="goto">查看</el-button>
							<el-button size="mini" type="danger" @click="verify">修改</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-col>			
		</el-row>
		<el-row class="paginations" justify="end" :gutter="20">
			<el-col :span="22" >
				<el-pagination layout="prev, pager, next" :total="500">
				</el-pagination>
			</el-col>
			<el-col :span="2">
				<el-button type="primary" @click="addDrivers">新增驾驶员</el-button>
			</el-col>
		</el-row>
	</section>
</template>

<script>
	export default {
		data() {
			return {
				formInline: {},
				tableData: [{
					name: '李四',
					IDcard: 32059875985962584,
					relates: '13698759856',
					status: '待审核',					
				}, {
					name: '李四',
					IDcard: 32059875985962584,
					relates: '13698759856',
					status: '待审核',					
				}, {
					name: '李四',
					IDcard: 32059875985962584,
					relates: '13698759856',
					status: '待审核',					
				}, {
					name: '李四',
					IDcard: 32059875985962584,
					relates: '13698759856',
					status: '待审核',					
				}, {
					name: '李四',
					IDcard: 32059875985962584,
					relates: '13698759856',
					status: '待审核',					
				}, {
					name: '李四',
					IDcard: 32059875985962584,
					relates: '13698759856',
					status: '待审核',					
				}, {
					name: '李四',
					IDcard: 32059875985962584,
					relates: '13698759856',
					status: '待审核',					
				}, {
					name: '李四',
					IDcard: 32059875985962584,
					relates: '13698759856',
					status: '待审核',					
				}],
			}
		},
		methods: {
			// 查询
			onSubmit() {
				console.log('submit!');
			},
			
			// 新增车辆
			addDrivers(){
				this.$router.push({
					path: '/add_driver'
				})
			},

			// 表格索引
			indexMethod(index) {
				return index * 1;
			},

			// 查看车辆详情
			goto() {
				this.$router.push({
					path: '/car_manage'
				})
			},
			// 整改
			verify(){
				this.$router.push({
					path: '/verify'
				})
			}
		}
	}
</script>
<style>
	.paginations {
		padding: 50px 0 20px;
	}
</style>
